<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
  <title>后台管理系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="/resources/css/dpl-min.css" rel="stylesheet" type="text/css" />
  <link href="/resources/css/bui-min.css" rel="stylesheet" type="text/css" />
  <link href="/resources/css/page-min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="/resources/js/editor/skins/default.css">
  <script language="JavaScript" src="/resources/js/editor/kindeditor.js"></script>
  <script language="JavaScript" src="/resources/js/editor/zh_CN.js"></script>
</head>
<body>

<div class="container">
  <form id="J_Form" class="form-horizontal" action="/product/save">
    <input type="hidden" name="id" value="${data.id}"/>
    <div class="row">
      <div class="control-group span12">
        <label class="control-label"><s>*</s>产品名称：</label>
        <div class="controls">
          <input name="name" type="text" data-rules="{required:true,maxlength:25}" value="${data.name}" class="input-normal control-text" style="width:200px;">
        </div>
      </div>

      <div class="control-group span12">
        <label class="control-label"><s>*</s>商品售价：</label>
        <div class="controls">
          <input type="text" name="price" class="control-text input-small" data-rules="{required:true,regexp:/^\d+(.\d{1,2})?$/}"
                 value="${data.price}" data-messages="{regexp:'请填写数字，允许保留两位小数'}"/>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="control-group span12">
        <label class="control-label"><s>*</s>市场价格：</label>
        <div class="controls">
          <input type="text" name="marketPrice" class="control-text input-small" data-rules="{regexp:/^\d+(.\d{1,2})?$/}"
                 value="${data.marketPrice}" data-messages="{regexp:'请填写数字，允许保留两位小数'}"/>
        </div>
      </div>

      <div class="control-group span12">
        <label class="control-label"><s>*</s>商品库存：</label>
        <div class="controls">
          <input type="text" name="stock" class="control-text input-small" data-rules="{regexp:/^\d+$/}"
                 value="${data.stock}" data-messages="{regexp:'请填写整数'}"/>  数值为0，表示无库存限制
        </div>
      </div>
    </div>

    <div class="row" id="img_tr" style="height: 150px;">
      <div class="control-group " style="width:100%;">
        <label class="control-label">商品图片：</label>
        <div class="controls" style="width:85%;">
          <input type="file"  id="innovationFile" /><br/>
          <div id="img_content" style="margin-top: 2px;">

            <c:if test="${data.images ne null}">
              <c:set var="images" value="${fn:split(data.images,'|')}"/>
              <c:forEach items="${images}" var="d" varStatus="status">
                <div id='div_${status.index}' style='float:left;'>
                  <img src='${request.getContextPath()}${d}' id='img__${status.index}' style="width: 100px;height: 100px;"/>
                 &nbsp;<div style="float:right;"><a class='fileDlt' style='cursor:pointer;'  onclick="deleteImg('${status.index}')">删除</a>&nbsp;<br/>
                <a class='fileDlt' style='cursor:pointer;margin-top: 10px;'  onclick="upImg('${status.index}')">上移</a><br/>
                <a class='fileDlt' style='cursor:pointer;margin-top: 10px;'  onclick="downImg('${status.index}')">下移</a></div> </div>&nbsp;&nbsp;
               </c:forEach>
            </c:if>

          </div>
        </div>
        <input type="hidden" name="images" id="images" value="${data.images}"/>
      </div>
    </div>

    <div class="row">
      <div class="control-group span20">
        <label class="control-label">商品简介：</label>
        <div class="controls control-row4">
          <textarea class="control-row4 control-text input-large" name="description">${data.description}</textarea>
        </div>
      </div>
    </div>


    <div class="row">
      <div class="control-group span20">
        <label class="control-label">商品详情：</label>
        <div style="display:inline;height:40px;margin-left: 10px;">
            <textarea name="content" id="content" cols=""
                      rows="" class="textinput" style="width:700px;height:350px;visibility:hidden;"
                      maxlength="1000">${data.content}</textarea>
        </div>
      </div>
    </div>


    <div class="row" style="margin-top: 5px;">
      <div class="control-group span20">
        <label class="control-label">排序：</label>
        <div class="controls">
          <input type="text" name="sort" value="${data.sort}" data-rules="{number:true}"
                 class="input-small control-text"/> 数值越小，位置越靠前
        </div>
      </div>
    </div>

    <h2>奖励参数设置</h2>
    <h3>
      普通消费者奖励参数
    </h3>

    <div class="row">
      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>三级以内奖励：</label>
        <div class="controls">
          <input type="text" name="memberIn" id="memberIn" value="${productParam.memberIn}" data-rules="{required:true,min:0,number:true}" />元
        </div>
      </div>

    </div>

    <h3>
      金牌代理奖励参数
    </h3>
    <div class="row">
      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>三级以内奖励：</label>
        <div class="controls">
          <input type="text" name="goldIn" id="goldIn" value="${productParam.goldIn}" data-rules="{required:true,min:0,number:true}" />元
        </div>
      </div>

      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>三级以外奖励：</label>
        <div class="controls">
          <input type="text" name="goldOut" id="goldOut" value="${productParam.goldOut}"  data-rules="{required:true,min:0,number:true}"/>元
        </div>
      </div>
    </div>

    <h3>
      全国总代奖励参数
    </h3>
    <div class="row">
      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>三级以内奖励：</label>
        <div class="controls">
          <input type="text" name="generalIn" id="generalIn" value="${productParam.generalIn}"  data-rules="{required:true,min:0,number:true}"/>元
        </div>
      </div>

      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>三级以外奖励：</label>
        <div class="controls">
          <input type="text" name="generalOut" id="generalOut" value="${productParam.generalOut}"  data-rules="{required:true,max:100,min:0,number:true}"/>元
        </div>
      </div>
    </div>
    <div class="row">
      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>金牌代理商三级以内奖励：</label>
        <div class="controls">
          <input type="text" name="generalGoldIn" id="generalGoldIn" value="${productParam.generalGoldIn}"  data-rules="{required:true,min:0,number:true}"/>元
        </div>
      </div>

      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>金牌代理商三级以外奖励：</label>
        <div class="controls">
          <input type="text" name="generalGoldOut" id="generalGoldOut" value="${productParam.generalGoldOut}"  data-rules="{required:true,max:100,min:0,number:true}"/>元
        </div>
      </div>
    </div>
    <h3>
      区域合伙人奖励参数
    </h3>
    <div class="row">
      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>三级以内奖励：</label>
        <div class="controls">
          <input type="text" name="partnerIn" id="partnerIn" value="${productParam.partnerIn}"  data-rules="{required:true,min:0,number:true}"/>元
        </div>
      </div>

      <div class="control-group span12">
        <label class="control-label" style="width:130px;"><s>*</s>三级以外奖励：</label>
        <div class="controls">
          <input type="text" name="partnerOut" id="partnerOut" value="${productParam.partnerOut}"  data-rules="{required:true,min:0,number:true}"/>元
        </div>
      </div>
    </div>



    <div class="row form-actions actions-bar">
      <div class="span13 offset3 ">
        <button type="submit" class="button button-primary">保存</button>
       <button type="button" class="button" onclick="back()">返回</button>
      </div>
    </div>
  </form>
</div>
<script type="text/javascript" src="/resources/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="/resources/js/bui-min.js"></script>
<script type="text/javascript" src="/resources/js/config-min.js"></script>
<script type="text/javascript" src="/resources/js/uploadReplace/uploadReplace.js"></script>

<script type="text/javascript">
  var editor;
  KindEditor.ready(function(K) {
    editor = K.create('textarea[name="content"]', {
      allowFileManager: true
    });
  });

  BUI.use('common/page'); //页面链接跳转
  BUI.use(['bui/tree','bui/form','bui/uploader'],function (Tree,Form,Uploader) {

    var form = new Form.HForm({
      srcNode : '#J_Form',
      submitType:"ajax",
      listeners:{
        beforesubmit:function(){
          $("#content").val(editor.html());
          //图片
          var images = $("#img_content img");
          var imgstr = "";
          for(var i = 0; i < images.length; i++) {
            imgstr += $(images[i]).attr("src");
            if(i != images.length - 1){
              imgstr += "|";
            }
          }
          $("#images").val(imgstr);
          return true;
        }
      },
      callback:function(data){
        BUI.Message.Alert(data.msg,function(){
          if(data.success){
            back();
          }
        },'info');
      }
    });

    form.render();

  /*  var uploader = new Uploader.Uploader({
      //指定使用主题
      theme: 'imageView',
      render: '#J_Uploader',
      url: '/upload/buiUpload',
      queue: {
        resultTpl:{
          'success': '<div class="success"><img src="{url}" title="{name}" style="width:100%;height:100%;"/></div>',
          'error': '<div class="error"><span class="uploader-error">{msg}</span></div>'
        }
      },
      rules: {
        //文的类型
//        ext: ['.png,.jpg','文件类型只能为{0}'],
        //上传的最大个数
        max: [10, '文件的最大个数不能超过{0}个'],
        //文件大小的最大值,单位也是kb
        maxSize: [1024, '文件大小不能大于1M']
      }
    }).render();

    //回显图片
    if('${data.images}' != ''){
      var arr = '${data.images}'.split("|");
      for(var i = 0 ;i < arr.length; i++){
        $("#J_Uploader ul").append('<li class="bui-queue-item bui-queue-item-success"><div class="success">' +
                '<img src="'+arr[i]+'" style="width:100%;height:100%;"></div> <span class="action"><span class="bui-queue-item-del">删除</span></span></li>');
      }

    }*/
    if('${data.images}' != ''){
      var arr = '${data.images}'.split("|");
      if(arr.length>5){
        $("#img_tr").css("height","280px");
      }
    }
  });

  function back(){
    top.topManager.openPage({
      id : 'product_list',
      isClose : true
    });
    top.topManager.reloadPage('product_list');
  }

  czyx.uploadReplace('#innovationFile',{
    url:'${request.getContextPath()}/upload/img?type=2&ran='+new Date().getTime(), //文件处理的URL
    uploadReplaceCss:{
      //设置上传按钮图片
      background:'url("${request.getContextPath()}/resources/js/uploadReplace/uploadbut1.png") center no-repeat',
      width:120,             //上传按钮的宽度
      height:36              //上传按钮的高度
    },
    uploadBefore:function(){
      this.style.display = 'none';
    },
    uploadEnd:function(serverJson){//上传完毕后调用
      this.style.display = 'block';
      var result=eval("("+serverJson+")");
      if(result.suc=="0"){
        this.style.display = 'block';
        var images = $("#img_content img");
        if(images.length>5){
          $("#img_tr").css("height","280px");
        }
        if(images.length<10){
          var html="<div id='div_"+result.id+"' style='float:left;'><img src='${request.getContextPath()}"+result.url+"' id='img_"+result.id+"' style='width:100px;height:100px;'/>"+
                  "&nbsp;<div style='float:right;'><a class='fileDlt' style='cursor:pointer;'  onclick=\"deleteImg('"+result.id+"')\">删除</a><br/>" +
                  "<a class='fileDlt' style='cursor:pointer;'  onclick=\"upImg('"+result.id+"')\">上移</a><br/>" +
                  "<a class='fileDlt' style='cursor:pointer;'  onclick=\"downImg('"+result.id+"')\">下移</a></div>" +
                  "</div>";

          $('#img_content').append(html);
          $(".dform").addClass("dformAct");

        }else{
          alert("最多上传10张图片！");
        }
      }
    }
  });
  function deleteImg(id){
    $("#div_"+id).remove();
  }

  function upImg(id){
    var node = document.getElementById("div_"+id);
    var parent = document.getElementById("img_content");
    var tagPre=get_previoussibling(node);
    if(tagPre!=undefined){
      parent.insertBefore(node,tagPre);
    }
  }

  function downImg(id){
    var node = document.getElementById("div_"+id);
    var tagNext=get_nextsibling(node);
    if(tagNext!=undefined){
      insertAfter(node,tagNext);
    }
  }

  function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){
      parent.appendChild(newElement);
    }else{
      parent.insertBefore(newElement,targetElement.nextSibling);
    }
  }

  function get_previoussibling(n){
    if(n.previousSibling!=null){
      var x=n.previousSibling;
      while (x.nodeType!=1)
      {
        x=x.previousSibling;
      }
      return x;
    }
  }
  function get_nextsibling(n){
    if(n.nextSibling!=null){
      var x=n.nextSibling;
      while (x.nodeType!=1)
      {
        x=x.nextSibling;
      }
      return x;
    }
  }

</script>

</body>
</html> 